<template>
  <view class="font-icon-wrapper" :style="wrapperStyle">
	  <text
	    class="font-icon"
	    :class="[iconClass]"
	    :style="iconStyle"
	  ></text>
  </view>
</template>

<script>
export default {
  name: 'FontIcon',
  props: {
    // 图标名称（对应字体图标类名的后缀部分）
    name: {
      type: String,
      required: true
    },
    // 图标大小（支持 rpx 或 px 单位，默认 rpx）
    size: {
      type: [String, Number],
      default: '24rpx'
    },
    // 图标颜色
    color: {
      type: String,
      default: 'currentColor'
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 字体图标前缀（默认使用 iconfont）
    prefix: {
      type: String,
      default: 'iconfont'
    },
    // 底图宽度（默认 40rpx）
    wrapperWidth: {
      type: [String, Number],
      default: '40rpx'
    },
    // 底图高度（默认 40rpx）
    wrapperHeight: {
      type: [String, Number],
      default: '40rpx'
    },
    // 底色（默认透明，传参可控制）
    backgroundColor: {
      type: String,
      default: 'transparent'
    },
    // 是否去除 wrapper 的 width 和 height，只显示 icon（默认 false，保持原有行为）
    noWrapperSize: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 图标类名
    iconClass() {
      const baseClass = this.prefix
      // 如果 name 以 icon- 开头，说明已经是图标类名（如 icon-address）
      if (this.name.startsWith('icon-')) {
        return `${baseClass} ${this.name}`
      }
      // 如果 name 以 prefix- 开头，说明是完整类名（如 iconfont-address）
      if (this.name.startsWith(this.prefix + '-')) {
        return `${baseClass} ${this.name}`
      }
      // 否则拼接为 prefix-name 格式
      return `${baseClass} ${this.prefix}-${this.name}`
    },
    // 图标样式
    iconStyle() {
      const sizeValue = typeof this.size === 'number' ? `${this.size}rpx` : this.size
      const style = {
        fontSize: sizeValue,
        color: this.color
      }
      return { ...style, ...this.customStyle }
    },
    // 外层容器样式
    wrapperStyle() {
      const style = {
        backgroundColor: this.backgroundColor
      }
      
      // 如果 noWrapperSize 为 true，不设置 width 和 height
      if (this.noWrapperSize) {
        return style
      }
      
      // 默认行为：设置 width 和 height
      const widthValue = typeof this.wrapperWidth === 'number' ? `${this.wrapperWidth}rpx` : this.wrapperWidth
      const heightValue = typeof this.wrapperHeight === 'number' ? `${this.wrapperHeight}rpx` : this.wrapperHeight
      style.width = widthValue
      style.height = heightValue
      
      return style
    }
  }
}
</script>

<style lang="scss" scoped>
.font-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  border-radius: 4rpx;
  box-sizing: border-box;
}

.font-icon {
  font-family: "iconfont" !important;
  font-size: 24rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  text-decoration: none;
}
</style>
